<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件的传播</title>
    <style>
        body{
            text-align: center;
        }
        .pad{
            padding: 50px;
            display: inline-block;
        }
        .b4{
            width: 100px;
            height: 100px;
            background-color: rgb(243, 206, 206);
        }
        .b3{
            background-color: rgb(223, 245, 184);
        }
        .b2{
            background-color: rgb(192, 243, 196);
        }
        .b1{
            background-color: rgb(170, 195, 248);
            margin-top: 50px;
        }
    </style>
</head>
<body>
    <div class="b1 pad">
        b1
        <div class="b2 pad">
            b2
            <div class="b3 pad">
                b3
                <div class="b4 pad">
                    b4
                </div>
            </div>
        </div>
    </div>
    <script>
        const b1 = document.querySelector('.b1')
        const b2 = document.querySelector('.b2')
        const b3 = document.querySelector('.b3')
        const b4 = document.querySelector('.b4')
        //监听捕获
        b1.addEventListener('click',function(){
            console.log('b1')
        },true)
        b2.addEventListener('click',function(){
            console.log('b2')
        },true)
        b3.addEventListener('click',function(){
            console.log('b3')
        },true)
        b4.addEventListener('click',function(){
            console.log('b4')
        },true)
        
        //监听冒泡
        b1.addEventListener('click',function(){
            console.log('b1')
        },false)
        b2.addEventListener('click',function(){
            console.log('b2')
        },false)
        b3.addEventListener('click',function(){
            console.log('b3')
        },false)
        b4.addEventListener('click',function(){
            console.log('b4')
        },false)

        window.addEventListener('click',function(){
            console.log('window 冒泡')
        },false)

        window.addEventListener('click',function(){
            console.log('window 捕获')
        },{once:true,capture:true})
    </script>
</body>
</html>